<template>
    <div style="width: 100%;height: 100%;overflow: hidden;">
        <img src="/static/images/可视化地图详情.png" style="width: 100%;height: 100%;" />
        <div style="position: absolute;width: 50%; height: .6rem;left:25%; top: 2%;cursor: pointer;" @click="$router.push('./index')">

        </div>
        <img src="/static/images/bounced.png" style="width: 4.25rem;position:absolute;top:30%;right: 37%;" />
        <img id="arrow" src="/static/images/arrow.png" style="transition: all 0.5s;width: .25rem;position:absolute;top:55%;right: 47.5%;" />
        <img id="position" @click="$router.push('./room')" src="/static/images/positioning.png"
            style="cursor: pointer; width: .25rem;transition: all 0.5s;position:absolute;top:62.5%;right: 47.5%;" />
        <img id="circle" @click="$router.push('./room')" src="/static/images/circle.png"
            style="cursor: pointer;width: .8rem;height: auto;transition: all 0.5s;position:absolute;top:63.5%;right: 46%;" />
        <div id="div"
            style="pointer-events: none;background-color: black; transition: all .5s; position: absolute;top: 0;left: 0;width: 100%;height: 100%;">
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {

            }
        },
        methods: {

        },
        mounted() {
            setTimeout(() => {
                let div = document.getElementById("div");
                div.style.backgroundColor = "transparent";
            });
            let arrow = document.getElementById('arrow');
            let circle = document.getElementById('circle');
            let position = document.getElementById('position');
            let state = 0;
            setInterval(() => {
                if (state) {
                    state = 0;
                    circle.style.transform = "scale(1)";
                    position.style.top = "62.5%";
                    arrow.style.top = "55%";

                } else {
                    circle.style.transform = "scale(1.05)";
                    state = 1;
                    position.style.top = "62%";
                    arrow.style.top = "54.5%";
                }
            }, 500);
        },
    }
</script>
<style>

</style>
